<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">竞彩篮球</view>
		</view>
		<view class="title_rightbox">
			<view class="title_rightbox_text">帮助</view>
		</view>
	</view>

	<!-- tab部分 -->
	<view class="tab">
		<view class="tab_leftbox">
			<view v-for="(item, index) in tabs" :key="index" class="tab_leftbox_text"
				:class="{ 'active': currentTab === index }" @click="setCurrentTab(index)">
				{{ item }}
			</view>
		</view>
		<view class="tab_rightbox">
			<image class="tab_rightbox_image" src="../../static/四宫格.png"></image>
		</view>
	</view>
	<!-- 混合投注部分 -->
	<view class="tabqiehuan" v-if="currentTab === 0">

		<!-- 以下是下拉框部分 -->
		<view class="xialakuang">
			<view class="xialakuang_text">2024-09-25 周三 共2场</view>
			<image class="xialakuang_zhankai" src="../../static/展开1.png" :class="{ 'rotated': expanded }"
				@click="toggleExpand"></image>
		</view>

		<!-- 以下是比赛内容 -->
		<view class="bisaibox" v-show="expanded">
			<view class="bisaibox_saishibox">
				<view class="bisaibox_saishibox1">
					<view class="bisaibox_saishibox_leftbox"></view>
					<view class="bisaibox_saishibox_rightbox">
						<view class="bisaibox_textbox1">
							<view class="bisaibox_textbox_text1">[客]</view>
							<view class="bisaibox_textbox_text2">狂热</view>
						</view>
						<view class="bisaibox_textbox2">
							<view class="bisaibox_textbox_text">VS</view>
						</view>
						<view class="bisaibox_textbox1">
							<view class="bisaibox_textbox_text2">太阳</view>
							<view class="bisaibox_textbox_text1">[主]</view>
						</view>
					</view>
				</view>

				<view class="bisaibox_nrbox">

					<view class="bisaibox_nrbox_leftbox">
						<view class="bisaibox_nrbox_leftbox_text1">周三301</view>
						<view class="bisaibox_nrbox_leftbox_text2">美职女篮</view>
						<view class="bisaibox_nrbox_leftbox_text3">21:58截止</view>
						<view class="bisaibox_nrbox_leftbox_text4">分析</view>
					</view>

					<view class="bisaibox_nrbox_rightbox">


						<view class="bisaibox_nrbox_rightbox_textbox">
							<view class="bisaibox_nrbox_rightbox_textbox11">
								<view class="bisaibox_nrbox_rightbox_textbox_text">胜负</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">客胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">主胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
						</view>

						<view class="bisaibox_nrbox_rightbox_textbox">
							<view class="bisaibox_nrbox_rightbox_textbox12">
								<view class="bisaibox_nrbox_rightbox_textbox_text">让分</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">客胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">主胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
						</view>

						<view class="bisaibox_nrbox_rightbox_textbox">
							<view class="bisaibox_nrbox_rightbox_textbox13">
								<view class="bisaibox_nrbox_rightbox_textbox_text">大小分</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">客胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox2">
								<view class="bisaibox_nrbox_rightbox_textbox21">主胜</view>
								<view class="bisaibox_nrbox_rightbox_textbox22">
									<view class="bisaibox_nrbox_rightbox_text">3.24</view>
									<image class="bisaibox_nrbox_rightbox_image"
										src="../../static/llvsexiangxiajiantou.png"></image>
								</view>
							</view>
						</view>

						<view class="bisaibox_nrbox_rightbox_textbox">
							<view class="bisaibox_nrbox_rightbox_textbox14">
								<view class="bisaibox_nrbox_rightbox_textbox_text">胜分差</view>
							</view>
							<view class="bisaibox_nrbox_rightbox_textbox3">
								<view class="bisaibox_nrbox_rightbox_textbox31">展开胜分差玩法</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>


	<view class="tabqiehuan" v-if="currentTab === 1">胜负（让）页面</view>
	<view class="tabqiehuan" v-if="currentTab === 2">大小分页面</view>
	<view class="tabqiehuan" v-if="currentTab === 3">胜分差页面</view>
	<!-- 以下是底部tabbar -->
	<view class="dibutabbar">
		<view class="dibuleft">
			<view class="lajitong">
				<image class="imgljt" src="../../static/ljt.png"></image>
			</view>
			<view class="dibutextbox">
				<view class="dibutext1">已关注0场</view>
				<view class="dibutext2">至少选一场单关或任意2场比赛</view>
			</view>
		</view>
		<view class="diburight">
			<view class="textxyb">下一步</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				expanded: false, //控制展开和收起的状态
				currentTab: 0, // 当前选中的tab索引
				tabs: ["混合投注", "胜负（让）", "大小分", "胜分差"], // Tab标题
			};
		},
		methods: {
			// 跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
			// 控制展开和收起的方法
			toggleExpand() {
				this.expanded = !this.expanded;
			},
			// 设置当前选中的tab
			setCurrentTab(index) {
				this.currentTab = index;
			},
		},
	}
</script>

<style>
	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_leftbox_image_fanhui {
		width: 17px;
		height: 17px;
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_middlebox_text {
		font-size: 22px;
		color: white;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_rightbox_text {
		color: white;
	}

	/* 以下是tab部分样式 */

	.tab {
		background-color: #fbe5e5;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2% 0;
	}

	.tab_leftbox {
		width: 90%;
		display: flex;
		font-size: 22rpx;
	}

	.tab_leftbox_text {
		width: 20%;
		font-size: 20rpx;
		text-align: center;
		color: black;
	}

	.tab_leftbox_text.active {
		color: #E23234;
	}

	.tab_rightbox {
		width: 10%;
		display: flex;
		justify-content: center;
	}

	.tab_rightbox_image {
		width: 22px;
		height: 22px;
		display: block;
	}

	/* 以下是下拉框样式 */
	.xialakuang {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
	}

	.xialakuang_text {
		font-size: 22rpx;
	}

	.xialakuang_zhankai {
		width: 17px;
		height: 17px;
		display: block;
	}

	/* 旋转样式 */
	.rotated {
		transform: rotate(180deg);
	}

	/* 以下是比赛样式 */
	.bisaibox {
		background-color: white;
	}

	.bisaibox_saishibox {
		border-bottom: 1px solid #eee;
		padding: 2% 2% 6% 2%;
	}

	.bisaibox_saishibox1 {
		display: flex;
	}

	.bisaibox_saishibox_leftbox {
		width: 30%;
	}

	.bisaibox_saishibox_rightbox {
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bisaibox_textbox1 {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bisaibox_textbox2 {
		width: 60%;
		text-align: center;
	}

	.bisaibox_textbox_text {
		font-size: 12px;
		color: rgb(153, 153, 153);
	}

	.bisaibox_textbox_text1 {
		color: rgb(153, 153, 153);
		font-size: 9px;
	}

	.bisaibox_textbox_text2 {
		font-size: 12px;
	}

	.bisaibox_nrbox {
		display: flex;
	}

	.bisaibox_nrbox_leftbox {
		width: 16%;
		text-align: center;
		padding: 2%;
	}

	.bisaibox_nrbox_leftbox_text1 {
		font-size: 12px;
	}

	.bisaibox_nrbox_leftbox_text2 {
		color: rgb(255, 255, 255);
		background: rgb(24, 181, 102);
		font-size: 12px;
	}

	.bisaibox_nrbox_leftbox_text3 {
		font-size: 12px;
	}

	.bisaibox_nrbox_leftbox_text4 {
		font-size: 12px;
		color: red;
	}

	.bisaibox_nrbox_rightbox {
		width: 80%;
	}
	.bisaibox_nrbox_rightbox_text{
		color: #999;
		
	}
	.bisaibox_nrbox_rightbox_textbox {
		display: flex;
		height: 32px;
	}

	.bisaibox_nrbox_rightbox_textbox11 {
		width: 20%;
		text-align: center;
		background: #7732b1;
		color: white;
		font-size: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.bisaibox_nrbox_rightbox_textbox12 {
		width: 20%;
		text-align: center;
		background: #2f42af;
		color: white;
		font-size: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.bisaibox_nrbox_rightbox_textbox13 {
		width: 20%;
		text-align: center;
		background: #1caf2a;
		color: white;
		font-size: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.bisaibox_nrbox_rightbox_textbox14 {
		width: 20%;
		text-align: center;
		background: #ff5f27;
		color: white;
		font-size: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.bisaibox_nrbox_rightbox_textbox2 {
		width: 46%;
		text-align: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
		background-color: #fbe5e5
	}
	/* .bisaibox_nrbox_rightbox_textbox2 :hover{
		color: white;
	} */

	.bisaibox_nrbox_rightbox_textbox21 {
		font-size: 20rpx;
	}

	.bisaibox_nrbox_rightbox_textbox22 {
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bisaibox_nrbox_rightbox_textbox3 {
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.bisaibox_nrbox_rightbox_textbox31 {
		font-size: 20rpx;
	}

	.bisaibox_nrbox_rightbox_image {
		width: 4px;
		height: 8px;
	}

	/* 底部 */
	.dibutabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	}

	.dibuleft {
		width: 73%;
		display: flex;
		align-items: center;
		background-color: #fbe5e5;
		padding: 1%;
	}

	.imgljt {
		width: 24px;
		height: 24px;
		display: block;
	}

	.dibutextbox {
		text-align: center;
		flex: 1;
	}

	.dibutext1 {
		font-size: 18rpx;
	}

	.dibutext2 {
		color: rgb(248, 150, 23);
		font-size: 18rpx;
	}

	.diburight {
		width: 23%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #808080;
		color: white;
		padding: 1%;
		font-size: 24rpx;
	}
</style>
